import { Skeleton } from '~/components/skeleton';

export function GameMenuLoading() {
  const bp = useAppBreakpoints();
  const rowCount = 5;
  const colCount = 8;
  return (
    <>
      <div class="mt-7.5">
        {Array.from({ length: rowCount }).map((i, key) => {
          return (
            <>
              <div class="flex flex-between">
                <Skeleton type="rect" width={100} height={20} class="" />
                <Skeleton type="rect" width={100} height={20} class="" />
              </div>
              <div class="my-3.5 max-w-full flex gap-5 overflow-hidden lt-mobile:gap-2.5">
                {Array.from({ length: colCount }).map(() => (
                  bp.ltTabletl
                    ? (
                        <Skeleton
                          type="rect"
                          width="104px"
                          height="137px"
                          class="min-w-104px flex-1"
                        />
                      )
                    : (
                        <Skeleton
                          type="rect"
                          width="160px"
                          height="210px"
                          class="min-w-160px flex-1"
                        />
                      )

                ))}
              </div>

              {
                key === 0
                  ? (
                      <div class="my-3.5 max-w-full flex gap-5 overflow-hidden lt-mobile:gap-2.5">
                        {Array.from({ length: colCount }).map(() => (
                          bp.ltTabletl
                            ? (
                                <Skeleton
                                  type="rect"
                                  width="104px"
                                  height="137px"
                                  class="min-w-104px flex-1"
                                />
                              )
                            : (
                                <Skeleton
                                  type="rect"
                                  width="160px"
                                  height="210px"
                                  class="min-w-160px flex-1"
                                />
                              )
                        ))}
                      </div>
                    )
                  : ''
              }
            </>
          );
        })}
      </div>
    </>
  );
}

export function GameSearchLoading() {
  return (
    <>
      <div class="mt-7.5">
        <>
          <div class="my-5 max-w-full flex gap-2 overflow-hidden">
            {Array.from({ length: 12 }).map(() => (
              <div class="relative">
                <div class="pb-[130.4%]">
                  <Skeleton type="rect" width="100%" height="100%" class="absolute left-0 top-0" />
                </div>
              </div>
            ))}
          </div>
        </>
      </div>
    </>
  );
}

export function GameListLoading() {
  const bp = useAppBreakpoints();
  return (
    <Skeleton class="infinite grid">
      {
        bp.tabletl
          ? Array.from({ length: 27 }).map(() => (
            <div class="relative">
              <div class="pb-[130.4%]">
                <Skeleton type="rect" width="100%" height="100%" class="absolute left-0 top-0" />
              </div>
            </div>
          ))
          : Array.from({ length: 12 }).map(() => (
            <div class="relative">
              <div class="pb-[131.4%]">
                <Skeleton type="rect" width="100%" height="100%" class="absolute left-0 top-0" />

              </div>
            </div>
          ))
      }
    </Skeleton>
  );
}
export function GameVendorsLoading() {
  const bp = useAppBreakpoints();
  return (
    <Skeleton class="infinite grid">
      {
        bp.tabletl
          ? Array.from({ length: 27 }).map(() => (
            <div class="relative">
              <div class="pb-[30.4%]">
                <Skeleton type="rect" width="100%" height="100%" class="absolute left-0 top-0" />
              </div>
            </div>
          ))
          : Array.from({ length: 12 }).map(() => (
            <div class="relative">
              <div class="pb-[30.4%]">
                <Skeleton type="rect" width="100%" height="100%" class="absolute left-0 top-0" />

              </div>
            </div>
          ))
      }
    </Skeleton>
  );
}

export function StatisticsLoading() {
  return (
    <>
      <div class="mt-5 flex gap-2 overflow-hidden">
        {Array.from({ length: 5 }).map(() => (
          <Skeleton
            type="rect"
            height="32px"
            class="min-w-140px"
          />
        ))}
      </div>
    </>
  );
}
